<template>
  <div style="background: #f0f0f0"  v-if="loadinghow" >
    <div
    v-if="flag"
      class="container container-func sl_all_bg"
      id="yhgnPage"
      style="min-height: 100%"
    >
      <div id="innerContainer">
        <br />
        <br />
        <div class="header-sea">
          <el-row style="text-align: center">
            <el-col :span="8">
              <span style="color: red">*</span>
              学年
              <el-select v-model="year" placeholder="请选择">
                <el-option
                  v-for="dict in time"
                  :key="dict.item"
                  :label="dict"
                  :value="dict"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <span style="color: red">*</span>
              学期
              <el-select v-model="smarts" placeholder="请选择">
                <el-option
                  v-for="item in smart"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" icon="el-icon-search" @click="searsh"
                >查询</el-button
              >
            </el-col>
          </el-row>
        </div>
      </div>

      <br /><br />
      <div class="table-main" >
    <div class="timetable_title">{{ user.nickName }}的课表</div> 

        <el-row>
          <div style="float: right">
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              @click="preSch"
              :disabled="nowWeek <= 1"
              >上一周</el-button
            >
            <span>第 {{ nowWeek }} 周</span>

            <el-button type="primary" @click="nextSch"
              >下一周<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </div>
        </el-row>
        <el-row>
          <h6 class="pull-left">2023-2024学年第1学期</h6>
          <!-- <h6 class="pull-right">{{ user[0].studentCode }}</h6> -->
        </el-row>

        <el-row>
          <span class="pull-left">★-理论☆-实验〇-课外■-实践◆-上机</span
          ><span class="pull-right"
            ><font color="red" size="3"><b>注：</b></font
            ><font color="red" size="3"><i>红色斜体为待筛选</i></font
            >，<font color="blue" size="3">蓝色为已选上</font></span
          ></el-row
        >
        <br />

        <el-row>
          <table border="1" v-loading="loadingShow">
            <thead>
              <tr>
                <th>时间段</th>
                <th>节次</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
              </tr>
            </thead>
            <tbody>
              <template v-for="(item, index) in couserStu">
                <tr>
                  <td :rowspan="item.items.length + 1">{{ item.whens }}</td>
                </tr>
                <tr v-for="(item, subIndex) in item.items" :key="subIndex">
                  <td>{{ item.Section }}</td>
                  <td>
                    <template v-for="detail in item.CouSch" v-if="nowWeek == detail.week">
                      <div
                        class="timetable_con text-left"
                        v-if="detail.day == 1"
                      >
                        <span class="title"
                          ><font color="blue">
                            {{ detail.courseName }}
                          </font></span
                        >
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="节/周"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-time"
                              ></span></font></span
                          >
                          <font color="blue" >
                            <span v-if="detail.sections != null">{{detail.sections}} 节</span>
                            <span v-if="detail.sections == null">第 {{detail.section}} 节</span>
                           第 {{ detail.week }} 周</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="上课地点"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-map-marker"
                              ></span></font></span
                          ><font color="blue">
                            重庆财经学院 {{ detail.roomName }}</font
                          >
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教师"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-user"
                              ></span></font></span
                          ><font color="blue"> {{ detail.teacherName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班名称"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.courseName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班组成"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.className }}</font>
                        </p>
                      </div>
                    </template>
                  </td>
                  <td>
                    <template v-for="detail in item.CouSch" v-if="nowWeek == detail.week">
                      <div
                        class="timetable_con text-left"
                        v-if="detail.day == 2"
                      >
                        <span class="title"
                          ><font color="blue">
                            {{ detail.courseName }}
                          </font></span
                        >
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="节/周"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-time"
                              ></span></font></span
                          >
                          <font color="blue" >
                            <span v-if="detail.sections != null">{{detail.sections}} 节</span>
                            <span v-if="detail.sections == null">第 {{detail.section}} 节</span>
                           第 {{ detail.week }} 周</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="上课地点"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-map-marker"
                              ></span></font></span
                          ><font color="blue">
                            重庆财经学院 {{ detail.roomName }}</font
                          >
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教师"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-user"
                              ></span></font></span
                          ><font color="blue"> {{ detail.teacherName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班名称"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.courseName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班组成"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.className }}</font>
                        </p>
                      </div>
                    </template>
                  </td>
                  <td>
                    <template v-for="detail in item.CouSch" v-if="nowWeek == detail.week">
                      <div
                        class="timetable_con text-left"
                        v-if="detail.day == 3"
                      >
                        <span class="title"
                          ><font color="blue">
                            {{ detail.courseName }}
                          </font></span
                        >
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="节/周"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-time"
                              ></span></font></span
                          >
                          <font color="blue" >
                            <span v-if="detail.sections != null">{{detail.sections}} 节</span>
                            <span v-if="detail.sections == null">第 {{detail.section}} 节</span>
                           第 {{ detail.week }} 周</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="上课地点"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-map-marker"
                              ></span></font></span
                          ><font color="blue">
                            重庆财经学院 {{ detail.roomName }}</font
                          >
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教师"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-user"
                              ></span></font></span
                          ><font color="blue"> {{ detail.teacherName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班名称"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.courseName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班组成"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.className }}</font>
                        </p>
                      </div>
                    </template>
                  </td>
                  <td>
                    <template v-for="detail in item.CouSch" v-if="nowWeek == detail.week">
                      <div
                        class="timetable_con text-left"
                        v-if="detail.day == 4"
                      >
                        <span class="title"
                          ><font color="blue">
                            {{ detail.courseName }}
                          </font></span
                        >
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="节/周"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-time"
                              ></span></font></span
                          >
                          <font color="blue" >
                            <span v-if="detail.sections != null">{{detail.sections}} 节</span>
                            <span v-if="detail.sections == null">第 {{detail.section}} 节</span>
                           第 {{ detail.week }} 周</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="上课地点"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-map-marker"
                              ></span></font></span
                          ><font color="blue">
                            重庆财经学院 {{ detail.roomName }}</font
                          >
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教师"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-user"
                              ></span></font></span
                          ><font color="blue"> {{ detail.teacherName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班名称"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.courseName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班组成"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.className }}</font>
                        </p>
                      </div>
                    </template>
                  </td>
                  <td>
                    <template v-for="detail in item.CouSch" v-if="nowWeek == detail.week">
                      <div
                        class="timetable_con text-left"
                        v-if="detail.day == 5"
                      >
                        <span class="title"
                          ><font color="blue">
                            {{ detail.courseName }}
                          </font></span
                        >
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="节/周"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-time"
                              ></span></font></span
                          >
                          <font color="blue" >
                            <span v-if="detail.sections != null">{{detail.sections}} 节</span>
                            <span v-if="detail.sections == null">第 {{detail.section}} 节</span>
                           第 {{ detail.week }} 周</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="上课地点"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-map-marker"
                              ></span></font></span
                          ><font color="blue">
                            重庆财经学院 {{ detail.roomName }}</font
                          >
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教师"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-user"
                              ></span></font></span
                          ><font color="blue"> {{ detail.teacherName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班名称"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.courseName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班组成"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.className }}</font>
                        </p>
                      </div>
                    </template>
                  </td>
                  <td>
                    <template v-for="detail in item.CouSch" v-if="nowWeek == detail.week">
                      <div
                        class="timetable_con text-left"
                        v-if="detail.day == 6"
                      >
                        <span class="title"
                          ><font color="blue">
                            {{ detail.courseName }}
                          </font></span
                        >
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="节/周"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-time"
                              ></span></font></span
                          >
                          <font color="blue" >
                            <span v-if="detail.sections != null">{{detail.sections}} 节</span>
                            <span v-if="detail.sections == null">第 {{detail.section}} 节</span>
                           第 {{ detail.week }} 周</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="上课地点"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-map-marker"
                              ></span></font></span
                          ><font color="blue">
                            重庆财经学院 {{ detail.roomName }}</font
                          >
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教师"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-user"
                              ></span></font></span
                          ><font color="blue"> {{ detail.teacherName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班名称"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.courseName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班组成"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.className }}</font>
                        </p>
                      </div>
                    </template>
                  </td>
                  <td>
                    <template v-for="detail in item.CouSch" v-if="nowWeek == detail.week">
                      <div
                        class="timetable_con text-left"
                        v-if="detail.day == 7"
                      >
                        <span class="title"
                          ><font color="blue">
                            {{ detail.courseName }}
                          </font></span
                        >
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="节/周"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-time"
                              ></span></font></span
                          >
                          <font color="blue" >
                            <span v-if="detail.sections != null">{{detail.sections}} 节</span>
                            <span v-if="detail.sections == null">第 {{detail.section}} 节</span>
                           第 {{ detail.week }} 周</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="上课地点"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-map-marker"
                              ></span></font></span
                          ><font color="blue">
                            重庆财经学院 {{ detail.roomName }}</font
                          >
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教师"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-user"
                              ></span></font></span
                          ><font color="blue"> {{ detail.teacherName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班名称"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.courseName }}</font>
                        </p>
                        <p>
                          <span
                            data-toggle="tooltip"
                            data-placement="top"
                            title="教学班组成"
                            ><font color="blue"
                              ><span
                                class="glyphicon glyphicon-home"
                              ></span></font></span
                          ><font color="blue"> {{ detail.className }}</font>
                        </p>
                      </div>
                    </template>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </el-row>
      </div>

      

    </div>

    <div class="container" v-else>
      <h1>该角色没有课表</h1>
    </div>

  </div>
</template>


  
  <script>
import { listTeacher,listByTeacherId } from "@/api/edu/sch";
export default {
  data() {
    return {
      user: [],
      time: [],
      nowWeek: 1,
      flag:false,
      loadinghow:false,
      year: 2023,
      smarts: 2,
      loadingShow: true,
      currentTime: new Date().getFullYear(),
      smart: [
        {
          value: 1,
          label: "第一学期",
        },
        {
          value: 2,
          label: "第二学期",
        },
      ],
      value: "",
      couserStu: [],
    };
  },
  created() {
    this.loadingShow = true;
    this.getList();

    this.generateYears();
    this.loadingShow = false;
    this.getUser();
  },

  methods: {
    getList() {
      this.flag = true
      listTeacher(this.year, this.smarts, this.nowWeek).then((res) => {
        if(res!= 'admin'){
          this.couserStu = res;
          this.flag = true
        }
        else{
          this.flag = false

        }
        this.loadinghow = true
      });

    },

    generateYears() {
      const currentYear = new Date().getFullYear();
      for (let i = 0; i < 4; i++) {
        this.time.push(currentYear - i);
      }
    },
    getUser() {
      listByTeacherId().then((response) => {
        this.user = response.data;
      });
    },
    searsh() {
      this.getList();
      this.year = "";
      this.smarts = "";
    },
    preSch() {
      this.nowWeek--;
      this.getList();
    },
    nextSch() {
      this.nowWeek++;
      this.getList();
    },  
  },
};
</script>
  
  <style scoped>
.table-main {
  width: 88%;
  margin: 10px auto;
  border: 1px solid #e6e6e6;
  padding: 40px 45px;
  text-align: center;
}
.timetable_title {
  color: #666666;
  font-size: 30px;
  font-family: "microsoft YaHei";
}
.timetable1 .timetable_title h6 {
  padding-top: 25px;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 4rem;
text-align: center;
margin: 0 auto;
}
.header-sea {
  width: 90%;
  margin: 10px auto;
  border: 1px solid #e6e6e6;
  padding: 35px 45px;
  text-align: center;
}
.top2 {
  background: #0483d4;
  margin-bottom: 15px;
}
.sl_all_bg .sl_all_form {
  padding: 20px 12px 12px 12px;
  border: 1px solid #e6e6e6;
}

.row {
  margin-right: -10px;
  margin-left: -10px;
}
.container {
  width: 1500px;
  margin: 0 auto;
  background-color: #fff;
}
.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}
.schedule {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}
.timetable1 .timetable_con {
  padding: 5px;
  overflow: hidden;
  width: 15%;
}
.timetable1 .timetable_con .title {
  color: #666666;
  font: bold 14px/25px SimSun;
  display: block;
  width: 100%;
}
.timetable1 .timetable_con p {
  width: 100%;
  color: #666666;
  font: normal 12px/25px SimSun;
}
</style>
  